<template>
	<!-- <view class="audio-player-container" :style="containerStyle">
    <view class="audio-player-bar">
      <view class="circle-progress" @click="goDetail">
        <view class="circle-bg"></view>
        <view class="circle-progress-bar" :style="progressStyle"></view>
        <view class="content">
          <image
            class="cover-image"
            :src="vuex_audio.currentTrack.coverImgUrl"
            mode="aspectFill"
          />
          <view class="play-pause-icon">
            <text v-if="vuex_audio.isPlaying">||</text>
            <text v-else>▶</text>
          </view>
        </view>
      </view>
    </view>
  </view> -->
	<view class="my-page-container" v-if="AccountInfo.miniProgram.envVersion == 'release'" :style="{ height: pageBoxH + 'px' }" @click="goDetail">
		<CircleProgress class="mine-member-level-progress" :diameter="pageBoxH" :hoopThickness="lineWidth" hoopColor="#00aa00" :percent="percent" />
		<image
			class="img"
			:src="
				vuex_audio.currentTrack.coverImgUrl ||
				'https://wx.qlogo.cn/mmhead/5K48YNcpF3aunuqWwOEaJWYCkls0kIoHiaDhVXvT7ticSDwr7IeX3PiaUg7BHZicLe1qQ4qSGSvlQIA/0'
			"
			:style="{
				width: pageBoxH - 2 * lineWidth + 'rpx',
				height: pageBoxH - 2 * lineWidth + 'rpx',
				left: lineWidth + 'rpx',
				top: lineWidth + 'rpx'
			}"
			mode="aspectFill"
		></image>
		<view class="icon" v-if="!vuex_audio_status.isPlaying">
			<u-icon color="#FFFFFF" name="play-right-fill" size="20"></u-icon>
		</view>
	</view>
	<view class="my-page-container" :style="{ height: pageBoxH + 'px' }" v-else>
		<!-- <image
			class="img"
			src="https://wx.qlogo.cn/mmhead/5K48YNcpF3aunuqWwOEaJWYCkls0kIoHiaDhVXvT7ticSDwr7IeX3PiaUg7BHZicLe1qQ4qSGSvlQIA/0"
			:style="{
				width: pageBoxH - 2 * lineWidth + 'rpx',
				height: pageBoxH - 2 * lineWidth + 'rpx',
				left: lineWidth + 'rpx',
				top: lineWidth + 'rpx'
			}"
			mode="aspectFill"
		></image> -->
	</view>
</template>

<script>
import CircleProgress from '@/components/CircleProgress.vue';
export default {
	name: 'audio-player',
	components: {
		CircleProgress
	},
	computed: {
		percent: function () {
			let currentTime = this.vuex_audio.currentTrack.currentTime;
			let duration = this.vuex_audio.currentTrack.duration || 0;
			let per = duration ? currentTime / duration : 0;
			return per;
		}
	},
	data() {
		return {
			pageBoxH: 80,
			lineWidth: 8,
			currentPercent: 0.25,
			AccountInfo: {}
		};
	},
	created() {
		let AccountInfo = wx.getAccountInfoSync();
		// if (AccountInfo.miniProgram.envVersion == 'develop') {
		this.AccountInfo = AccountInfo;
		// }
	},
	methods: {
		goDetail() {
			uni.navigateTo({
				url: '/pages/album/play?mp3file_id=' + this.vuex_audio.currentTrack.mp3file_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.my-page-container {
	//   background-color: white;
	box-sizing: border-box;

	position: relative;
	.img {
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
	}
	.icon {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		transform: translateX(-50%) translateY(-50%);
	}
}
</style>